<template>
  <div>
    <div id="list1" class="list1" style="width: 630px; height: 433px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      echart: null,
    };
  },
  mounted() {
    this.initEchart(); // 首屏渲染
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById("list1"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      // prettier-ignore
      let data = [5600, 7600, 3600, 5000, 7800, 5600, 6200];
      let dataAxis = [
        "11月11日",
        "11月12日",
        "11月13日",
        "11月14日",
        "11月15日",
        "11月16日",
        "11月17日",
      ];
      let option = {
        title: {
          text: "近 7 日挂号预约情况",
          subtext: "预约人次",
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        // dataZoom: [
        //   {
        //     type: "inside",
        //   },
        // ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
  .list1 {
    display: block;
    margin: 10px;
    padding: 30px 0 0 30px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px 5px #ddd;
  }
</style>